<template>
  <div class="home-top" v-if="sketch">
    <div class="left" v-if="!isChat">
      <img
        src="../assets//image/home/list.png"
        alt=""
        class="left-img"
        @click="$router.push('/cate')"
      />
    </div>
    <div class="right" v-if="isChat">
      <img src="../assets//image//home/chat.png" alt="" class="right-img" />
    </div>
    <form @click="gotoSearch">
      <input type="text" class="search" :placeholder="sketch" />
    </form>
    <div class="right" v-if="!isChat">
      <img src="../assets//image//home/chat.png" alt="" class="right-img" />
    </div>
    <div class="right" v-if="isChat">
      <img src="../assets/image//cate/cart.png" alt="" class="right-img" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isChat: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sketch: "",
      searchHot: JSON.parse(sessionStorage.getItem("searchHot") || "[]"), //热门搜索
    };
  },
  methods: {
    // 跳转搜索页
    gotoSearch() {
      this.$router.push({
        path: "/search",
        query: {
          sketch: this.sketch,
          searchHot: this.searchHot,
        },
      });
    },
    // 获取热门搜索数据
    async getSearchHot() {
      const { data: res } = await this.axios.get("/hotSearch.json");
      this.searchHot = res.data.hotWord.data;
      sessionStorage.setItem("searchHot", JSON.stringify(this.searchHot));

      this.sketch = res.data.sketch.data.frontword;
    },
  },
  created() {
    this.getSearchHot();
  },
};
</script>

<style lang="scss" scoped>
.home-top {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  z-index: 888;
  height: 50px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #ffff;
  border-bottom: 1px solid #efefef;
  .left,
  .right {
    flex: 0 0 50px;
    text-align: center;
  }

  img {
    width: 22px;
  }

  form {
    flex: 1;
    background-color: #eeeeee;
  }
  input {
    vertical-align: middle;
    outline: 0;
    -webkit-appearance: none;
    -webkit-user-select: text;
  }
  input::-webkit-input-placeholder {
    color: #999;
  }
  .search {
    display: block;
    padding-left: 30px;
    height: 30px;
    font-size: 12px;
    color: #999;
    border: none;
    background: #eee url(../assets/image/home/search.png) no-repeat left;
    border-radius: 3px;
    background-size: 15px auto;
    background-position: 10px;
  }
}
</style>